interface IconProps {
  width?: any;
  height?: any;
  color?: string;
  style?: React.CSSProperties;
}

const FileIcon = ({
  width = 200,
  height = 200,
  color = "#666666",
  style,
}: IconProps) => {
  return (
    <svg
      style={style}
      viewBox="64 64 896 896"
      focusable="false"
      data-icon="folder"
      width={width}
      height={height}
    >
      <path
        d="M842.666667 285.866667l-187.733334-187.733334c-14.933333-14.933333-32-21.333333-53.333333-21.333333H234.666667C194.133333 74.666667 160 108.8 160 149.333333v725.333334c0 40.533333 34.133333 74.666667 74.666667 74.666666h554.666666c40.533333 0 74.666667-34.133333 74.666667-74.666666V337.066667c0-19.2-8.533333-38.4-21.333333-51.2z m-44.8 44.8c-2.133333 2.133333-4.266667 0-8.533334 0h-170.666666c-6.4 0-10.666667-4.266667-10.666667-10.666667V149.333333c0-2.133333 0-6.4-2.133333-8.533333 0 0 2.133333 0 2.133333 2.133333l189.866667 187.733334z m-8.533334 554.666666H234.666667c-6.4 0-10.666667-4.266667-10.666667-10.666666V149.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h311.466666c-2.133333 4.266667-2.133333 6.4-2.133333 10.666666v170.666667c0 40.533333 34.133333 74.666667 74.666667 74.666667h170.666666c4.266667 0 6.4 0 10.666667-2.133334V874.666667c0 6.4-4.266667 10.666667-10.666667 10.666666z"
        fill="#666666"
        p-id="1869"
      ></path>
      <path
        d="M640 693.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h298.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM640 522.666667H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h298.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM341.333333 416h85.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32h-85.333334c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32z"
        fill={color}
        p-id="1870"
      ></path>
    </svg>
  );
};

const PngIcon = ({
  width = 200,
  height = 200,
  color = "#666666",
  style,
}: IconProps) => {
  return (
    <svg
      style={style}
      viewBox="64 64 896 896"
      focusable="false"
      data-icon="folder"
      width={width}
      height={height}
    >
      <path
        d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872z m189.11744 420.32128c17.92 0 33.92 3.2 48 9.6l-8.63744 20.15744c-14.08-7.04-27.84256-10.55744-41.28256-10.55744-18.56 0-33.28 6.07744-44.16 18.23744s-16.31744 29.76256-16.31744 52.80256c0 23.04 4.79744 40.63744 14.39744 52.79744 10.24 11.52 25.6 17.28 46.08 17.28 9.6 0 19.84-1.28 30.72-3.84v-51.84h-35.51744v-20.15744h57.6v86.4c-17.92 5.76-37.44256 8.63744-58.56256 8.63744-23.68 0-42.55744-7.68-56.63744-23.04s-21.12-37.76-21.12-67.2c0-28.16 7.35744-49.92 22.07744-65.28 15.36-16 36.48-23.99744 63.36-23.99744z m-398.39744 1.92h43.19744c20.48 0 35.84 4.48 46.08 13.44 10.24 8.32 15.36 21.12 15.36 38.4s-5.43744 31.03744-16.31744 41.27744c-10.88 9.6-26.88 14.40256-48 14.40256h-18.24256v68.15744h-22.07744V500.96128z m142.08 0h25.91744l85.44256 144.95744h0.95744c-1.28-21.12-1.92-37.43744-1.92-48.95744v-96h21.12v175.67744H392.8064l-86.4-144.95744h-0.96256c1.28 23.04 1.92 39.68 1.92 49.92v95.03744h-20.15744V500.96128z m-120.00256 19.2v69.12h15.36c16 0 27.20256-2.88256 33.60256-8.64256 7.04-5.76 10.55744-14.72 10.55744-26.88 0-10.88-3.51744-19.2-10.55744-24.96-6.4-5.76-16.32256-8.63744-29.76256-8.63744h-19.2z"
        p-id="3806"
        fill={color}
      ></path>
    </svg>
  );
};

const MarkdownIcon = ({
  width = 200,
  height = 200,
  color = "#666666",
  style,
}: IconProps) => {
  return (
    <svg
      style={style}
      viewBox="64 64 896 896"
      focusable="false"
      data-icon="folder"
      width={width}
      height={height}
    >
      <path
        d="M903.542857 256.8c6.857143 6.857143 10.742857 16.114286 10.742857 25.828571V987.428571c0 20.228571-16.342857 36.571429-36.571428 36.571429H146.285714c-20.228571 0-36.571429-16.342857-36.571428-36.571429V36.571429c0-20.228571 16.342857-36.571429 36.571428-36.571429h485.371429c9.714286 0 19.085714 3.885714 25.942857 10.742857l245.942857 246.057143zM829.942857 299.428571L614.857143 84.342857V299.428571h215.085714zM413.862857 613.634286l67.554286 151.965714a18.285714 18.285714 0 0 0 16.708571 10.857143h27.497143a18.285714 18.285714 0 0 0 16.72-10.868572l67.542857-152.4V793.142857a18.285714 18.285714 0 0 0 18.297143 18.285714H659.428571a18.285714 18.285714 0 0 0 18.285715-18.285714V482.285714a18.285714 18.285714 0 0 0-18.285715-18.285714h-39.714285a18.285714 18.285714 0 0 0-16.765715 10.994286L512.114286 683.657143l-90.834286-208.674286a18.285714 18.285714 0 0 0-16.765714-10.982857H364.571429a18.285714 18.285714 0 0 0-18.285715 18.285714v310.857143a18.285714 18.285714 0 0 0 18.285715 18.285714h31.005714a18.285714 18.285714 0 0 0 18.285714-18.285714V613.634286z"
        p-id="8286"
        fill={color}
      ></path>
    </svg>
  );
};

export { FileIcon, PngIcon, MarkdownIcon };
